<template>
  <div v-if="!props.disabled">
    <tiny-date-picker v-model="model"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      :picker-options="props.pickerOptions"
                      :size="props.size"
                      :readonly="props.readonly"
                      :disabled="props.disabled"
                      :clearable ="props.clearable"
                      :placeholder="props.placeholder"
                      :type="props.dataType"
    />
  </div>
  <div style="display: flex;line-height: 28px;height: 28px;" v-else>
    <div class="readonly" style="width: 100%;flex: 1;" >
      {{ model }}
    </div>
<!--    <div class="alt" @click="alt">修改</div>-->
  </div>
</template>
<script setup>
import tool from "@/utils/tool";
import { TinyDatePicker } from '@opentiny/vue'
import { ref} from 'vue'
const props = defineProps({
  placeholder: {  type: String, default: '选择日期' },
  width: {  type: Number, default: 0 },
  height: {  type: [Number, String], default: '' },
  size: {  type: String, default: 'small' }, // medium small default mini
  defaultValue: {  type: [String,Number], default: '' },
  dataType: {  type: String, default: 'date' },
  readonly: {type: Boolean, default: false},
  disabled: {type: Boolean, default: false},
  clearable: {type: Boolean, default: false},
})
const emit = defineEmits(['alt','update:modelValue'])
const model = defineModel()
const state = ref({
  dateRangeValue: '',
  monthRangeValue: '',
  startFromValue: '',
  pickerOptions: {
    shortcuts: [
      {
        text: '今天',
        onClick(picker) {
          const date = new Date()
          picker.$emit('pick', date)
        }
      },
      {
        text: '昨天',
        onClick(picker) {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24)
          picker.$emit('pick', date)
        }
      },
      {
        text: '前天',
        onClick(picker) {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 48)
          picker.$emit('pick', date)
        }
      },
      {
        text: '一周前',
        onClick(picker) {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
          picker.$emit('pick', date)
        }
      },
      {
        text: '一月前',
        value: () => {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
          picker.$emit('pick', date)
        }
      },
      {
        text: '三月前',
        value: () => {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 90)
          picker.$emit('pick', date)
        }
      },
      {
        text: '半年前',
        value: () => {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 180)
          picker.$emit('pick', date)
        }
      },
      {
        text: '一年前',
        value: () => {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 360)
          picker.$emit('pick', date)
        }
      },
    ]
  },
  pickerOptionsDateRange: {
    shortcuts: [
      {
        text: '最近一周',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          picker.$emit('pick', [start, end])
        }
      },
      {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          picker.$emit('pick', [start, end])
        }
      },
      {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }
    ]
  },
  pickerOptionsMonthRange: {
    shortcuts: [
      {
        text: '本月',
        onClick(picker) {
          const date = new Date()
          const tmp = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0, 0, 0)
          const start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0)
          const end = new Date(tmp.getTime() - 1)
          picker.$emit('pick', [start, end])
        }
      },
      {
        text: '今年至今',
        onClick(picker) {
          const date = new Date()
          const start = new Date(date.getFullYear(), 0)
          const end = new Date()
          picker.$emit('pick', [start, end])
        }
      },
      {
        text: '最近六个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setMonth(start.getMonth() - 6)
          picker.$emit('pick', [start, end])
        }
      }
    ]
  },
  pickerOptionsStartFrom: {
    shortcuts: [
      {
        text: '某日起始', // text可以自定义
        type: 'startFrom'
      },
      {
        text: '某日为止', // text可以自定义
        type: 'endAt'
      },
      {
        text: '自定义结束日期',
        type: 'startFrom',
        endDate: new Date('2030-10-10') // 传入的日期必须为一个日期对象
      },
      {
        text: '自定义开始日期',
        type: 'endAt',
        startDate: new Date('2000-10-10') // 传入的日期必须为一个日期对象
      }
    ]
  }
})
const change = (val) => {
  if(props.type === 'daterange') {
    if(val) {
      let b = tool.getDay(val[0])
      let e = tool.getDay(val[1])
      emit('update:modelValue', [b, e])
    }
    else {
      emit('update:modelValue', [])
    }
  }
  else {
    if(val) {
      emit('update:modelValue', tool.dateFormat(val))
    }
    else {
      emit('update:modelValue', null)
    }
  }
}
const alt = () => {
  emit('alt')
}


</script>
<style scoped lang="scss">
.readonly {
  padding-left: 5px;
  font-size: 14px;
  color: #656D78;
  display: flex;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
.alt {
  color: #1e9fff;
  font-size: 12px;
  padding-top: 3px;
  padding-left: 5px;
  &:hover {
    cursor: pointer;
    color: #c45656;
  }
}
</style>